<template>
  <!-- 通话量详情页面 -->
  <div id="CallAmountInfo">
    <div class="callTableInfo" v-show="!show">
      <div class="details">
        <div class="top-content">
          <img src="@/assets/img/right.png" alt="" @click="openSilde"><span>{{departmentName}}-{{callType?callType:'人'}}</span>
        </div>
      </div>
      <div class="details-header">
        <div class="total">
          <span>
            共
            <span>{{ detailTotalSize }}</span>条
          </span>
        </div>
      </div>
      <div style="position:relative">
        <el-table
          :data="body.content"
          border
          style="width: 1063px;margin: 0 auto"
          class="basic-table info-basic-table"
          :header-cell-style="{background:'#1fb19e',color: '#fff',padding: '2px 0'}"
          @sort-change="sortChange"
          highlight-current-row
        >
          <!-- 通话量详情表格 -->
          <el-table-column type="index" :index="indexMethod" width="65" label="序号"></el-table-column>
          <el-table-column
            v-if="column.name !=='regionId'"
            v-for="column in header"
            :key="column.field"
            :prop="column.name"
            :label="column.field"
            align="center"
            :sortable="column.name==='startTime'||column.name==='duration'?'custom':false"
            :width="column.name==='name'?72:column.name==='level'?50:column.name==='resourceCode'?115:column.name==='resourceType'?85:column.name==='customerName'?100:column.name==='callerLoc'?125:column.name==='callType'?80:column.name==='startTime'?170:column.name==='duration'?120:''">
            <template slot-scope="scope">
              <span class="click-span">{{ scope.row[column.name] }}</span>
            </template>
          </el-table-column>
          <el-table-column width="80" label="操作" class="is-center">
            <template slot-scope="scope">
              <el-button @click="SideslipClick(scope.row)" type="text" size="small" :disabled="scope.row.duration==='00秒'?true:false">通话录音</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="mask" v-if="loading"></div>
        <div class="loading-area" v-if="loading">
          <table-loading :loading="loading"></table-loading>
          <div class="loading-text">努力加载中</div>
        </div>
      </div>
      <pagination :loading="paginationLoading" :page="InfoData.page" :total="detailTotalSize" @pagination-change="handleCurrentChange" class="call-info-pagenation" :show="!show"></pagination>
    </div>
    <div class="videoInfo" v-show="show">
      
      <div class="top-content">
        <img src="@/assets/img/left.png" alt="" @click="show = false">
        <span>资源编号【{{resourceCode?resourceCode:'-'}}】</span>
        <span>{{startTime}}</span>
      </div>
      
      <div class="center-content">
        <transition name="audio">
          <player-audio  :voiceUrl="show?address.url:''" @close="showAudio=false" :show="show"/>
        </transition>
      </div>
      
      <div class='bottom-content' >
        <span>通话录音转文字内容：</span>
        <ul v-if="canVoice">
          <li v-for="(item,index) in callText" :key="index">{{ item }}</li>
        </ul>
        <div v-else class="content-tips">{{flagDuration ? '暂无录音地址':'时长小于5秒，无文字内容'}}</div>
      </div>

    </div>
  </div>
</template>
<script>
/**       
 * @author 王磊
 * @information 通话量页面详情
 * @date 2019-1-12 15:32
 * @param {*} infoData 接收父表格数据字段
 */
import { createNamespacedHelpers } from "vuex"
const { mapState } = createNamespacedHelpers("CallAmountInfo")
import commonUtils from '@/assets/js/commonUtil.js'
export default {
  props: {
    infoData: Object,
    displayHiding: Boolean, //true侧滑显示，false侧滑隐藏
    departmentName: String,
    callType: String
  },
  data() {
    return {
      show: false, // 表格详情页和播放录音页显示或者隐藏，true显示录音页，false显示详情信息页
      InfoData: {
        field: null,
        order: null,
        orderName: null,
        type: null,
        startTime: '',
        endTime: '',
        page: 1,
        size: 30
      },
      showAudio: false, // 是否显示播放器
      data : '',
      resourceCode:'', //通话录音资源编号
      startTime:'', //通话录音开始时间
      pageType: "second", //页面类型
      canVoice: true,  //是否有录音地址
      flagDuration: false //判断录音时长是否小于5秒
    };
  },
  computed: {
    ...mapState(["header", "body", "address", "loading", "detailTotalSize", "paginationLoading","callText"])
  },
  methods: {
    /**
     * @author 赵美阳
     * @information 打开、关闭侧滑
     * @date 2019-04-12
     */
    openSilde(){
      this.$emit("openSilde");
    },
    /**
     * @author 陈涛
     * @information 通话量详情表格数据
     * @date 2019-1-19
     */
    InfoTbody (val) {
      this.InfoData = {...val}
      // 判断是否为人的表格数据
      if (val.tableType === 'region') {
        // 部门ID
        delete this.InfoData.userId
        this.InfoData['departmentId'] = val.Id
      } else {
        // 人ID
        delete this.InfoData.departmentId
        this.InfoData['userId'] = val.Id
      }
      // 每次进入详情显示第一页
      this.InfoData.page = 1
      this.InfoData.size = 30
      // 获取详情表格头部数据
      this.$store.dispatch("CallAmountInfo/getCallAmountInfoHeader")
      // 获取详情表格数据
      this.$store.dispatch("CallAmountInfo/getCallAmountInfoBody", this.InfoData)
      // 获取总条数
      this.$store.dispatch("CallAmountInfo/detailTotalSize", this.InfoData)
    },
    /**
     * @author 陈涛
     * @information 跳转页面
     * @date 2019-1-19
     */
    JumpCallAmount() {
      this.$emit('JumpCallAmount')
    },
    /**
     * @author 陈涛
     * @information 侧滑菜单
     * @date 2019-1-21
     */
    SideslipClick(row) {
      this.resourceCode = row.resourceCode;
      this.startTime = row.startTime;
      this.show = true
      //点击通话录音按钮获取录音地址
      this.$store.dispatch("CallAmountInfo/getCallRecording", row.callId).then(res=>{
        //如果有录音地址进入播放录音页面，并且获取文字内容
        if( res.data.url && res.data.duration >= 5){
          this.$store.dispatch('CallAmountInfo/getCallText',{duration:res.data.duration,url:res.data.url})
          this.canVoice = true
        }else{ 
          //没有录音地址提示暂无录音
          this.canVoice = false
          //时长是否大于5，大于5提示没有录音地址，小于5提示时长太短
          res.data.duration >= 5 ? this.flagDuration = true : false
        }
      });
    },
    /**
     * @author 陈涛
     * @information 分页
     * @date 2019-2-15
     */
    handleCurrentChange (page, size) {
      this.$set(this.InfoData, 'page', page)
      this.$set(this.InfoData, 'size', size)
      this.$store.dispatch('CallAmountInfo/callAmountInfoPageModel', this.InfoData)
    },
    /**
   * @author 王磊
   * @information 获取当前行的索引
   * @date 2019-1-16 10:04
   */
    indexMethod (index) {
      return index + (this.InfoData.page - 1) * this.InfoData.size + 1
    },
    /**
     * @author 陈涛
     * @information 升序降序
     * @date 2019-2-15
     */
    sortChange (val) {
      this.$set(this.InfoData, 'orderName', val.prop)
      this.$set(this.InfoData, 'order', val.order === 'descending' ? 'DESC' : 'ASC')
      // 获取详情表格数据
      this.$store.dispatch("CallAmountInfo/getCallAmountInfoBody", this.InfoData)
    }
  },
  watch: {
    /**
     * @author 赵美阳
     * @information 判断侧滑是否打开
     * @date 2019-4-11
     */
    displayHiding(val){
      !val ? this.show  = false : ''
    },
    infoData (val) {
      if (val) {
        this.InfoTbody(val)
      }
    }
  }
}
</script>